﻿
@using MyCompanyName.AbpZeroTemplate.Web.Areas.Mpa.Models.Common.Modals

@Html.Partial("~/Areas/Mpa/Views/Common/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel(@L("Product_Create")))
<div class="modal-body">
    <form name="ProductForm" enctype="multipart/form-data">
        <div class="form-group form-md-line-input form-md-floating-label">
            <div id="image" class="fileinput fileinput-new" data-provides="fileinput">
                <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                </div>
                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;">
                </div>
                <div>
                    <span class="btn default btn-file">
                        <span class="fileinput-new">选择图片</span>
                        <span class="fileinput-exists">更换图片</span>
                        <input type="file" name="file" id="file" value="">
                        <input type="hidden" id="FileName" name="FileName"/>
                    </span>
                    <a href="javascript:;" id="clear" class="btn red fileinput-exists" data-dismiss="fileinput">移除</a>
                </div>
            </div>
        </div>
        <div class="form-group form-md-line-input form-md-floating-label">
            @Html.DropDownList("CategoryId", @ViewBag.categories as SelectList, "请选择", new {@class = "form-control edited", required = true})
            <label>@L("Product_CategoryName")<span class="required">*</span></label>
        </div>
        <div class="form-group form-md-line-input form-md-floating-label">
            <input class="form-control " type="text" name="Name" required>
            <label>@L("Product_Name")<span class="required">*</span></label>
        </div>
        <div class="form-group form-md-line-input form-md-floating-label">
            <input class="form-control" type="text" name="Price" required>
            <label>@L("Product_Price")<span class="required">*</span></label>
        </div>
    </form>
</div>
@Html.Partial("~/Areas/Mpa/Views/Common/Modals/_ModalFooterWithSaveAndCancel.cshtml")
<script>
    $(function() {
        $("#file").change(function () {
            ajaxFileUpload();
        });
        $("#clear").click(function () {
            $("#FileName").val("");
        });
    });
    function ajaxFileUpload() {
        $.ajaxFileUpload
        (
            {
                url: '/image/Upload', //用于文件上传的服务器端请求地址
                secureuri: false, //是否需要安全协议，一般设置为false
                fileElementId: 'file', //文件上传域的ID
                dataType: 'JSON',
                success: function (data, status) //服务器成功响应处理函数
                {

                    data = eval("(" + data + ")");
                    if (data.success) {
                        $("#FileName").val(data.result.fileName);
                        if ($(".fileinput-preview img").length == 0) {
                            $(".fileinput-preview").append("<img src='' style='max-height: 140px;' />");
                            $("#image").removeClass("fileinput-new").addClass("fileinput-exists");
                        }
                        $(".fileinput-preview img").attr("src", "/images/" + data.result.fileName);
                    } else {
                        alert(data.error);
                    }

                },
                error: function (data, status, e) //服务器响应失败处理函数
                {
                    alert(e);
                },
                complete: function (xmlHttpRequest) {
                    $("#file").change(function () {
                        ajaxFileUpload();
                    });
                }
            }
        );
        return false;
    }
</script>